<template>
  <div>
    <div class="m-d-charts" id="hotPeople" v-loading="loading" v-show="hasData"></div>
    <div class="m-d-charts" style="position: relative" v-show="hasNoData">
      <span class="un-data-th">暂无数据哦～</span>
    </div>
    <el-dialog
      title="相关信息"
      :visible.sync="dialogVisible">
      <el-table :data="gridData" height="400" stripe>
        <el-table-column property="title" label="标题" width="400">
          <template slot-scope="scope">
            <span v-html="scope.row.title"></span>
          </template>
        </el-table-column>
        <el-table-column property="source" label="来源" align="center">
          <template slot-scope="scope">
            <span v-html="scope.row.source"></span>
          </template>
        </el-table-column>
        <el-table-column property="href" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              type="text"
              size="small">
              查看原网址
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  import api from '../api/api'
  import echarts from 'echarts/lib/echarts'
  // 引入柱状图
  import 'echarts/lib/chart/bar';
  import 'echarts/lib/chart/line';
  import 'echarts/lib/component/title';
  import 'echarts/lib/component/legend';
  import 'echarts/lib/component/toolbox';
  import 'echarts/lib/component/markPoint';
  import 'echarts/lib/component/tooltip';

  export default {
    name: "people-echarts",
    props: ['keywordId', 'timeRange'],
    data() {
      return {
        gridData: [],
        loading: true,
        fromDateString: '',
        toDateString: '',
        peopleName: [],
        peopleNum: [],
        dialogVisible: false,
        hasData: true,
        hasNoData: false
      }
    },
    mounted() {
      this.hotPeople = echarts.init(document.getElementById('hotPeople'));
      this.getData();
      this.resize();
      let that = this;
      this.hotPeople.on('click', function (params) {
        that.gridData =[];
        that.dialogVisible = true;
        let content = params.data.content;
        for (let k = 0; k < content.length; k++) {
          that.gridData.push({
            title: content[k].title,
            source: content[k].sourceSpider,
            href: content[k].url
          })
        }
      })
    },
    methods: {
      resize() {
        // echarts自适应页面
        const self = this;
        setTimeout(() => {
          window.onresize = function () {
            self.hotPeople.resize()
          }
        }, 20)
      },
      getData() {
        api.HotPeople({keywordId: this.keywordId, fromDateString: this.fromDateString, toDateString: this.toDateString})
          .then(res => {
              this.loading = false;
              if(res.listPersonName.length == 0){
                this.hasData = false;
                this.hasNoData = true;
                return false
              }
              this.peopleName = [];
              this.peopleName = res.listPersonName;
              this.peopleNum = [];
              for (let i = 0; i < res.listPersonName.length; i++) {
                this.peopleNum.push({
                  value: res.nerCountMap[res.listPersonName[i]],
                  content: res.hotPeople[res.listPersonName[i]]
                })
              }
              this.initData();
          }).catch(e => {
          console.log(e);
        });
      },
      initData() {
        const option = {
          toolbox: {
            show: true,
            itemSize: 25,
            right: 20,
            feature: {
              dataZoom: {show: false},
              dataView: {show: false},
              magicType: {show: false},
              restore: {show: false},
              saveAsImage: {}
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.peopleName,
              axisLine: {
                lineStyle: {
                  color: '#EFF3F5'
                }
              },
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                rotate: 45,
                fontSize: 16,
                color: '#333'
              },
              z: 10
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#EFF3F5'
                }
              },
              axisLabel: {
                fontSize: 16,
                color: '#333'
              },
              splitLine: {
                lineStyle: {
                  color: '#EFF3F5'
                }
              }
            }

          ],
          series: [
            {
              name: '热度',
              type: 'bar',
              barWidth: '30%',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#83bff6'},
                      {offset: 0.5, color: '#188df0'},
                      {offset: 1, color: '#188df0'}
                    ]
                  ),
                  label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                      color: '#615a5a',
                      fontSize: 16,
                    }
                  }
                }
              },
              data: this.peopleNum
            }
          ]
        };
        this.hotPeople.setOption(option);
      },
      handleClick(row) {
        window.open(row.href);
      }
    },
    watch: {
      keywordId() {
        this.hotPeople.clear();
        this.hasData = true;
        this.hasNoData = false;
        this.loading = true;
        this.getData()
      },
      timeRange() {
        if(this.timeRange == null){
          this.fromDateString = '';
          this.toDateString = ''
        }else{
          this.fromDateString = this.timeRange[0];
          this.toDateString = this.timeRange[1];
        }
        this.hotPeople.clear();
        this.hasData = true;
        this.hasNoData = false;
        this.loading = true;
        this.getData()
      }
    }
  }
</script>

<style scoped lang="less">

</style>
